<template>
	<view class="container">
		<view class="top">
			<image src="../../static/邮件.png" mode="aspectFill" class="msg"></image>

			<view class="userInfo">
				<image :src="'http://localhost:8080'+userInfo.image" mode="aspectFill"></image>
				<text v-if=userInfo.name>{{userInfo.name}}</text>
				<text v-else @click="toLogin">登录/注册</text>
			</view>

			<view class="other">
				<view class="other-item">
					<text>{{userInfo.follow}}</text>
					<text>关注</text>
				</view>
				<view class="other-item">
					<text>{{userInfo.fans}}</text>
					<text>粉丝</text>
				</view>
			</view>
		</view>

		<view class="center">
			<view class="center-item" v-for="item,index in list" :key="index">
				<image :src="item.icon" mode=""></image>
				<text>{{item.title}}</text>
			</view>
		</view>

		<view class="bottom">
			<view class="bottom-item" v-for="item,index in options" :key="index" @click="setting(index)">
				<image :src="item.icon" mode=""></image>
				<text>{{item.title}}</text>
				<uni-icons type="forward" size="20" class="icon" color="#ddd"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow
	} from "@dcloudio/uni-app"
	
	import {
		reactive
	} from 'vue'

	function toLogin() {
		uni.navigateTo({
			url: '/pages/login/login'
		});
	}

	function setting(index) {
		if (index == 0) {
			uni.navigateTo({
				url: '/pages/my/update'
			});
		}
	}

	const userInfoInit = {
		id: '',
		name: '',
		phone: '',
		password: '',
		follow: 0,
		fans: 0,
		image: '/image/default.jpg'
	}

	const userInfo = reactive({
		...userInfoInit
	});

	const list = reactive([{
		icon: '../../static/灯泡.png',
		title: '内容管理'
	}, {
		icon: '../../static/历史记录.png',
		title: '历史记录'
	}, {
		icon: '../../static/收藏.png',
		title: '收藏夹'
	}])

	const options = reactive([{
		icon: '../../static/设置.png',
		title: '帐号设置'
	}, {
		icon: '../../static/垃圾.png',
		title: '回收站'
	}, {
		icon: '../../static/帮助.png',
		title: '反馈与帮助'
	}, {
		icon: '../../static/信息.png',
		title: '关于软件'
	}])

	onShow(() => {
		const userData = uni.getStorageSync('userInfo')
		if (userData.id) {
			Object.assign(userInfo, userData);
		} else {
			Object.assign(userInfo, userInfoInit);
		}
	});
</script>

<style scoped>
	.container {
		font-family: 'Arial', sans-serif;
	}

	.top {
		background: radial-gradient(circle at 50% 50%, #fff0, #fff),
			radial-gradient(farthest-side at bottom left, #e992d3, #fff0),
			radial-gradient(farthest-side at top left, #a4fff6, #fff0),
			radial-gradient(farthest-corner at bottom right, #6a4cff, #fff0),
			radial-gradient(farthest-corner at top right, #ff7ece, #fff0);
		padding: 40rpx;
		position: relative;
	}

	.msg {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 40rpx;
	}

	.userInfo {
		display: flex;
		align-items: center;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}

	.userInfo image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.userInfo text {
		font-size: 36rpx;
		font-weight: bold;
	}

	.other {
		display: flex;
	}

	.other-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-right: 40rpx;
	}

	.center {
		display: flex;
		justify-content: space-around;
		padding: 36rpx;
		border-bottom: 2rpx solid #ddd;
	}

	.center-item {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		align-items: center;
	}

	.center-item image {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}

	.center-item text {
		font-size: 28rpx;
		color: #333;
	}

	.bottom {
		padding: 40rpx;
	}

	.bottom-item {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx;
	}

	.bottom-item image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.bottom-item text {
		font-size: 32rpx;
		color: #333;
	}

	.icon {
		position: absolute;
		right: 10rpx;
	}
</style>